<template>
  <div class="aoto">
    <el-row class="header_top">
      <el-col :span="12" class="height_gao min_width">
        <div class="grid-content bg-purple  ">
          <el-select v-model="SerchName" placeholder="请选择搜索分类 " class="fenlei_width">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input v-model="K_Value" class="input_ height_" placeholder="请输入内容"></el-input>


          <el-button type="primary" class="subang buttons_" @click="Alladd" plain>分类 搜索</el-button>
          <el-button  class="subang buttons_" @click="bodyaudh(1)" plain>全部 订单</el-button>


        </div>
      </el-col>
      <el-col :span="12" class="height_gao right_width">
        <el-date-picker
          class="height_"
          v-model="Timevalue"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions2">
        </el-date-picker>

        <el-button type="success" @click="timeadd" class="buttons_" plain>时间 搜索</el-button>
        <el-button type="warning" @click="excel_" class="blac buttons_" >搜索 导出 EXCEL</el-button>
      </el-col>
    </el-row>
    <div class="autd animated slideInRight">
      <el-table :data="datatitle" border style="width: 100%" v-loading="loading2" element-loading-text="拼命加载中">
        <el-table-column prop="status" label="商品类型" width="90">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="150">
        </el-table-column>
        <el-table-column prop="goods_count" label="商品数量" width="100">
        </el-table-column>
        <el-table-column prop="goods_total" label="商品金额" width="170">
        </el-table-column>
        <el-table-column prop="hospital" label="就诊医院" width="170">
        </el-table-column>
        <el-table-column prop="disease" label="就诊疾病" width="120">
        </el-table-column>
        <el-table-column prop="name" label="用户名称" width="90">
        </el-table-column>
        <el-table-column prop="phone" label="联系方式" width="170">
        </el-table-column>
        <el-table-column prop="time_payment" label="付款时间" width="170">
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="cur"
        :page-size="pagesize"
        :page-count="currentPage4"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>

    </div>
  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'

  export default {
    components: {},
    data() {
      return {
        options: [{
          value: 'goods_name',
          label: '商品名称'
        }, {
          value: 'hospital',
          label: '医院名称'
        }, {
          value: 'disease',
          label: '病症'
        }, {
          value: 'name',
          label: '姓名'
        }, {
          value: 'phone',
          label: '电话'
        }],
        // time_start #付款时间
        // time_end #付款时间
        SerchName: '', //分类的值
        K_Value: '',    //搜索的值
        pagesize: this.$store.state.attribute.page, //每页条数
        total: 1, //总条数
        currentPage4: 1, //总页数
        cur: 1, //当前页数
        loading2: false,
        Temporary: [],  //总数据
        datatitle: [],  //当页数据
        Timevalue: '',  //时间搜索
        Getobject:{},
        GetobjectFlag:1,
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    methods: {
      handleClick(row) {
        console.log(row);
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      Alladd() {  //所有搜索
        if (this.SerchName == '') {
          this.$message({
            message: '请选择搜索的分类',
            type: 'warning'
          });
          return false
        }
        if (this.K_Value == '') {
          this.$message({
            message: '请选择填写搜索内容',
            type: 'warning'
          });
          return false
        }
        this.Getobject = {[this.SerchName]:this.K_Value};
        this.GetobjectFlag = 1;
        this.AllSerch(this.Getobject, 1);
      },
      timeadd() {
        if (this.Timevalue == '') {
          this.$message({
            message: '请选择搜索时间',
            type: 'warning'
          });
          return false
        }
        let newTime = this.$h.TwoNueTime(this.Timevalue[0], this.Timevalue[1]);

        this.Getobject = {
          'time_start':newTime[0],
          'time_end':newTime[1]
        };
        this.GetobjectFlag = 2;
        this.AllSerch(this.Getobject, 1);
      },
      AllSerch(Obj, e) {
        this.loading2 = true;
        this.http.post({
          'api': 'showorderlist',
          'data': {
            'limt': this.pagesize,
            'data':Obj
          },
          'page': e
        }).then((res) => {
          this.loading2 = false;
          this.shuju(res.data.data, res.data)
        }, (err) => {
          this.loading2 = false;
        })
      },

      excel_() {
        //cyht
        this.$h.EXCel('showorderlist',this.GetobjectFlag, this.Getobject);
      },

      handleCurrentChange(val) {
        this.cur = val;
        this.bodyaudh(val)
      },

      bodyaudh(e) {
        this.loading2 = true;
        this.http.post({
          'api': 'showorderlist',
          'data': {
            'limt': this.pagesize
          },
          'page': e
        }).then((res) => {
          this.loading2 = false;
          this.shuju(res.data.data, res.data)
        }, (err) => {
          this.loading2 = false;
        })
      },
      shuju(dataall, all) {
        this.Temporary = dataall;
        this.loading2 = false;
        this.total = all.total;
        this.currentPage4 = Math.ceil(this.total / this.pagesize);
        this.datatitle = this.Temporary
      },
    },
    watch: {

    },
    computed: {
      ...mapGetters([
        'reflag'
      ]),
    },
    mounted() {
      this.bodyaudh(1);
      //生命周期
    },
    created() {

      if (this.reflag != 215) {
        this.$router.push('/')
      }
    }
  }
</script>
<style scoped>
  .pic_css {
    height: 45%;
    width: 60%;
    margin-top: 15px;
  }
  .blac{
    background: black;
  }

  .min_width {
    min-width: 640px;
  }

  .right_width {
    min-width: 630px;
  }

  .header_top {
    height: 97px;
    width: 100%;
  }
  .height_{
    /*height: 30px;*/
  }

  .input_ {
    width: 220px;
    height: 40px;
  }
  .fenlei_width{
    width: 200px;
  }
  .allith2 {
    background: #090404;
    float: right;
    margin-top: 15px;
  }
  .buttons_ {
    /*padding: 9px 15px;*/
    font-size: 12px;
    border-radius: 3px;
  }
  .height_gao {
    height: 40px;
    padding-top: 10px;
  }

  .subang {
    /*width: 150px;*/
  }

  .el-row {

  /*margin-bottom: 20px;*/

  &
  :last-child {
    margin-bottom: 0;
  }

  }

  /*.el-col {*/
  /*border-radius: 4px;*/
  /*}*/

  /*.bg-purple-dark {*/
  /*!*background: #99a9bf;*!*/
  /*}*/

  /*.bg-purple {*/
  /*!*background: #d3dce6;*!*/
  /*}*/

  /*.bg-purple-light {*/
  /*!*background: #e5e9f2;*!*/
  /*}*/

  /*.grid-content {*/
  /*border-radius: 4px;*/
  /*min-height: 36px;*/
  /*}*/

  /*.row-bg {*/
  /*padding: 10px 0;*/
  /*background-color: #f9fafc;*/
  /*}*/
</style>
